<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        
    </div>

    <!-- <script type="text/x-template" id="boxTemp">
        <div id="a" ref="boxA">
            <h4>vue实例容器的DIV元素</h4>
            <pre class="note">
            vue实例对应的运行容器模板不是开发时所定义容器标签模板【看到的不是定义的】
                + vue的创建过程实际上是，先完成vue实例创建，创建的同时基于 template 属性定义的字符串构建DOM模板
                + 将构建的DOM模板以 mount 函数的调用方式，写入指定页面容器中
                + 因为template模板定义为字符串方式，所以书写代码相对困难，因此vue可以在不定义template属性时，直接使用mount描述页面结构作为模板
                + 但需要注意的是，mount描述的页面模板会首先作为配置属性 template以字符串的方式存在，当挂载时才会渲染成DOM元素
                + 因此容器中的标签会经过一次替换，所以才有 看到的不时定义的 说法
            </pre>
            <input type="button" value="printVueDom" @click="printVueDom()">
            <br>
            <input type="button" value="printOptions" @click="printVueOptions()">
        </div>
    </script> -->

    <template id="boxTemp">
        <div id="a" ref="boxA">
            <h4>vue实例容器的DIV元素</h4>
            <pre class="note">
            vue实例对应的运行容器模板不是开发时所定义容器标签模板【看到的不是定义的】
                + vue的创建过程实际上是，先完成vue实例创建，创建的同时基于 template 属性定义的字符串构建DOM模板
                + 将构建的DOM模板以 mount 函数的调用方式，写入指定页面容器中
                + 因为template模板定义为字符串方式，所以书写代码相对困难，因此vue可以在不定义template属性时，直接使用mount描述页面结构作为模板
                + 但需要注意的是，mount描述的页面模板会首先作为配置属性 template以字符串的方式存在，当挂载时才会渲染成DOM元素
                + 因此容器中的标签会经过一次替换，所以才有 看到的不时定义的 说法
            </pre>
            <input type="button" value="printVueDom" @click="printVueDom()">
            <br>
            <input type="button" value="printOptions" @click="printVueOptions()">
        </div>
    </template>

    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";

        let boxADom = document.querySelector("#a");

        createApp({
            template:"#boxTemp",
            data() {
                return {
                    
                }
            },
            methods: {
                printVueDom() {
                    console.log("js加载的:",boxADom);
                    console.log("vue加载的:",this.$refs.boxA);
                    console.log(this.$refs.boxA==boxADom);
                },
                printVueOptions(){
                    console.log(this.$options);
                }
            },
        }).mount("#app")
    </script>
</body>
</html>